<script setup lang="ts">
import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import { barOptions } from './echarts-data'
import { ref, reactive } from 'vue'

import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { adminStatisticsApi } from '@/api/admin'

import * as echarts from 'echarts'
import { useCache } from '@/hooks/web/useCache'
import { adminStatisticsAssetBreedSubPlanApi } from '@/api/cy/zichan'

const { wsCache } = useCache()
const userInfo: any = wsCache.get('userInfo')

const dict: any = wsCache.get('dict')

const { t } = useI18n()

const data = ref({})

const loading = ref(true)

// const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption

const getDictLabel = (type, value) => {
  let data = dict[type].find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}

// 用户来源
// const getUserAccessSource = async () => {
//   const res = {
//     code: '200',
//     data: [
//       { value: 335, name: 'analysis.directAccess' },
//       { value: 310, name: 'analysis.mailMarketing' },
//       { value: 234, name: 'analysis.allianceAdvertising' },
//       { value: 135, name: 'analysis.videoAdvertising' },
//       { value: 1548, name: 'analysis.searchEngines' }
//     ]
//   }
//   if (res) {
//     set(
//       pieOptionsData,
//       'legend.data',
//       res.data.map((v) => t(v.name))
//     )
//     set(pieOptionsData, 'series.data', res.data)
//   }
// }

const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption

// const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption

// 每月销售总额
// const getMonthlySales = async () => {
//   const res = {
//     code: '200',
//     data: [
//       { estimate: 100, actual: 120, name: 'analysis.january' },
//       { estimate: 120, actual: 82, name: 'analysis.february' },
//       { estimate: 161, actual: 91, name: 'analysis.march' },
//       { estimate: 134, actual: 154, name: 'analysis.april' },
//       { estimate: 105, actual: 162, name: 'analysis.may' },
//       { estimate: 160, actual: 140, name: 'analysis.june' },
//       { estimate: 165, actual: 145, name: 'analysis.july' },
//       { estimate: 114, actual: 250, name: 'analysis.august' },
//       { estimate: 163, actual: 134, name: 'analysis.september' },
//       { estimate: 185, actual: 56, name: 'analysis.october' },
//       { estimate: 118, actual: 99, name: 'analysis.november' },
//       { estimate: 123, actual: 123, name: 'analysis.december' }
//     ]
//   }
//   if (res) {
//     set(
//       lineOptionsData,
//       'xAxis.data',
//       res.data.map((v) => t(v.name))
//     )
//     set(lineOptionsData, 'series', [
//       {
//         name: t('analysis.estimate'),
//         smooth: true,
//         type: 'line',
//         data: res.data.map((v) => v.estimate),
//         animationDuration: 2800,
//         animationEasing: 'cubicInOut'
//       },
//       {
//         name: t('analysis.actual'),
//         smooth: true,
//         type: 'line',
//         itemStyle: {},
//         data: res.data.map((v) => v.actual),
//         animationDuration: 2800,
//         animationEasing: 'quadraticOut'
//       }
//     ])
//   }
// }

// const getAllApi = async () => {
//   await Promise.all([
//     // getUserAccessSource(),
//     //getWeeklyUserActivity(),
//     getMonthlySales()
//   ])
//   loading.value = false
// }

const getAdminStatisticsApi = async () => {
  const res = await adminStatisticsApi({})
    .catch(() => {})
    .finally(() => {
      loading.value = false
    })
  if (res) {
    data.value = res.data
    set(barOptionsData, 'title.text', '新增用户走势')
    set(
      barOptionsData,
      'xAxis.data',
      res.data.本周新增用户日走势.map((v) => t(v.days))
    )
    set(barOptionsData, 'series', [
      {
        name: '新增用户',
        data: res.data.本周新增用户日走势.map((v) => t(v.count)),
        type: 'bar'
      }
    ])
  }
}

const pieChart = ref()
const PieCh = async () => {
  var myChart = echarts.init(pieChart.value)
  const option = ref({
    title: {
      text: '畜别',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '畜别',
        type: 'pie',
        radius: '50%',
        center: ['50%', '50%'],
        data: [{}],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
  // 更新视图
  const { data } = await adminStatisticsAssetBreedSubPlanApi({
    my_org_id: userInfo.default_org_id
  })
  if (data) {
    console.log(data, '饼图')
    option.value.series[0].data = []
    for (let index = 0; index < data.length; index++) {
      option.value.series[0].data.push({
        value: data[index].count,
        name: getDictLabel('breed_sub', data[index].breed_sub)
      })
    }
  }
  myChart.setOption(option.value)
}
/****************************** 初始化 start ******************************/
const init = async () => {
  // 获取统计数据
  await getAdminStatisticsApi()
  // getAllApi()
  PieCh()
}

// 调度定时器任务
init()

/****************************** 初始化 end ******************************/
</script>

<template>
  <PanelGroup :data="data" />
  <ElRow :gutter="20" justify="space-between">
    <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
      <ElCard class="mb-20px">
        <div ref="pieChart" style="height: 300px"></div>
      </ElCard>
    </ElCol>
    <!-- <ElCol :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="pieOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol> -->
    <ElCol :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated>
          <Echart :options="barOptionsData" :height="300" />
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <!-- <ElCol :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <Echart :options="lineOptionsData" :height="350" />
        </ElSkeleton>
      </ElCard>
    </ElCol> -->
  </ElRow>
</template>
